<template>
	<view class="">
		<view class="my-page-block" style="margin-top: 10rpx;">
			<up-grid :border="false" col="5" @click="click">
				<up-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
					<view class="my-bg" :class="'my-bg-' + baseListItem.name">
						<!-- <up-icon :name="baseListItem.name" :size="28"></up-icon> -->
						<up-image :src="idnName + baseListItem.logo" width="88rpx" height="88rpx"></up-image>
					</view>
					<text class="grid-text">{{baseListItem.name}}</text>
				</up-grid-item>
			</up-grid>
		</view>
		
		<view class="my-page-block">
			<up-notice-bar icon="帮助中心" direction="column" :text="text1" color="#e1441d" font-size="14"
				@click="noticeClick"></up-notice-bar>
		</view>
		
		<view class="my-page-block my-module">
			<view class="my-module-item my-module-1">
				物业模块
			</view>
			<view class="my-module-item my-module-2">
				维修模块
			</view>
		</view>
		
		<view class="my-page-block my-card">
			<view class="my-card-title">
				社区公告
			</view>
			<up-scroll-list>
				<view class="my-thumb" v-for="(item, index) in list" :key="index" @click="handleCardClick(item)">
					<image :src="item.thumb" mode="widthFix"></image>
				</view>
			</up-scroll-list>
		</view>
		
	</view>

</template>

<script setup>
	import {
		onMounted,
		ref,
		reactive
	} from 'vue';
	import indexApi from '../../api';
	import loginApi from '../../api/login';
	const idnName = ref("")
	// 创建响应式数据  
	const baseList = ref([]);
	const click = (name) => {
		let tmp = baseList.value[name];
		if (tmp.url.indexOf("http") > -1) {
			uni.navigateTo({
				url: "/pages/webpage/webpage?url=" + encodeURIComponent(tmp.url)
			});
		} else if (tmp.url.indexOf("Housekeeping") > -1) {
			var appId = "wx22955fbcd0c97cb0"
			uni.navigateToMiniProgram({
				appId
			});
		} else if (tmp.url.indexOf("Property") > -1) {
			uni.makePhoneCall({
				phoneNumber: "0351-2304868"
			});
		}
	};

	// 滚动通知 
	const text1 = ["APP下载安装流程", "如何采集人脸?", "业主如何添加家人和租客"]
	const noticeClick = (e) => {
		console.log(e);
		uni.navigateTo({
			url: "/pages/mine/helper/helper"
		})
	}

	// 滚动内容
	const list = reactive([{
			thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
		},
		{
			thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
		},
		{
			thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
		},
		{
			thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
		},
		{
			thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
		}
	]);
	const handleCardClick = (e) => {
		console.log(e);
	}

	onMounted(async () => {
		let tmp = uni.getStorageSync("app");
		if (tmp) {
			let app = JSON.parse(tmp);
			uni.setNavigationBarTitle({
				title: app.communityName
			});
		}
		await getData();
		// uni.showModal({
		// 	showCancel: false,
		// 	title: "温馨提示",
		// 	content: "为了您能及时接听到门口机设备的呼叫信息，请接收呼叫通知！未接收的情况下可能会影响您及时接听来自各个门口机的呼叫！",
		// 	confirmText: "我知道了"
		// });
	});
	const getData = async () => {
		uni.showLoading({
			mask: true
		});
		// 获取用户信息
		const res = await getMyInfo();
		const app = JSON.parse(uni.getStorageSync("app"));
		// 获取用户companyId
		const res1 = await indexApi.getUserDev({
			account: app.account
		});
		uni.setStorageSync("companyId", res1.data && res1.data.companyId)
		// 获取菜单appFunctionModels、indexTemplates、navBars
		const res2 = await indexApi.getIndex({
			account: app.account
		});
		// 
		baseList.value = res2.data.appFunctionModels;
		idnName.value = res2.idnName;
		uni.setStorageSync("idnName", idnName.value);
		console.log(res1, res2);
		setTimeout(() => {
			console.log(111);
			uni.hideLoading()
		})
	}

	const getMyInfo = async () => {
		try{
			const res = await loginApi.getMyInfo();
			console.log(res);
			if (res.State) {
				uni.setStorageSync("user", JSON.stringify(res.Data));
			} else {
				console.log("获取用户信息失败");
				uni.reLaunch({
					url: "/pages/login/login"
				})
			}
		}catch(err){
			console.log(err);
			console.log("获取用户信息失败");
			uni.reLaunch({
				url: "/pages/login/login"
			})
		}
		
	};
</script>

<style lang="scss" scoped>
	.grid-text {
		font-size: 26rpx;
		color: #333;
		padding: 10rpx 0 20rpx 0rpx;
		box-sizing: border-box;
	}

	.my-bg {
		padding: 20rpx;
		border-radius: 40rpx;
		background-color: $uni-bg-color;
	}

	.my-page-block {
		padding: 20rpx 40rpx;
	}

	.my-module {
		padding: 20rpx 40rpx;
		display: flex;
		justify-content: space-between;

		.my-module-item {
			width: 300rpx;
			border-radius: 20rpx;
			text-align: center;
			line-height: 2.5em;
			color: #fff;

			&.my-module-1 {
				background-image: linear-gradient(to right, #005bac, #25cffd);
			}

			&.my-module-2 {
				background-image: linear-gradient(to right, #c74a0b, #fd9233);
			}
		}

	}

	.my-card {
		margin-top: 30rpx;
		background-color: #fff;

		.my-card-title {
			padding: 10rpx 40rpx 40rpx;
			font-size: 36rpx;
		}

		.my-thumb {
			margin-left: 30rpx;

			image {
				border-radius: 40rpx;
				width: 300rpx;
			}
		}
	}
</style>